<script setup>
import IndexChartCard from "./ChartCard.vue";

// 图标的options
const options = ref({
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: { data: ['销量'] },
  xAxis: { type: 'category', data: ['2023-12', '2024-01', '2024-02', '2024-03', '2024-04', '2024-05'] },
  yAxis: { type: 'value', inverse: false },
  series: [{
    type: 'line',
    data: [0, 0, 0, 0, 2, 0],
    smooth: true,
    itemStyle: {
      color: function (params) {
        const value = params.value;
        const max = 2;
        const min = 0;
        const scale = (value - min) / (max - min);
        const green = Math.round(255 * scale);
        const red = Math.round(255 * (1 - scale));
        return `#${('00' + red.toString(16)).slice(-2)}${('00' + green.toString(16)).slice(-2)}00`;
      }
    }
  }]
});

/**
 * 处理后端返回的数据
 * @param data
 * @returns {*|*[]}
 */
function dataHandle(data) {

  if (!data || !data.length) {
    return []
  }

  const opt = options.value;

  opt.xAxis.data = data.map(item=> {
    return item.name
  });

  opt.series[0].data = data.map(item=> {
    return item.value
  });
}

</script>

<template>
  <index-chart-card title="耗材入库情况" :options="options" url="index/chart/consume/in" :data-handle="dataHandle"></index-chart-card>
</template>

<style scoped lang="scss">

</style>